<template>
  <view class="bannerBox" :style="'height:' + height">
    <u-swiper :list="dataList" v-if="type == 1"></u-swiper>
    <video v-else id="myVideo" style="width: 100%" :style="'height:' + height" :autoplay="false" :loop="true"
      :src="dataList[0]"></video>
  </view>
</template>
<script>
import config from "@/config";
const baseUrl = config.baseUrl;
export default {
  props: {
    data: {
      type: String,
      default: "https://cdn.uviewui.com/uview/swiper/swiper1.png",
    },
    type: {
      // 1轮播图，2视频
      type: Number,
      default: 1,
    },
    height: {
      type: String,
      default: "300rpx",
    },
  },
  data() {
    return {
      dataList: [],
    };
  },
  watch: {
    data: {
      handler(val, oval) {
        if (val) {
          let data = val.split(",");
          let arr = [];
          data.forEach((item) => {
            // arr.push(baseUrl + item);
            arr.push(item)
          });
          this.dataList = arr;
        }
      },
      deep: true, //是否深度监听
      immediate: true, //是否监听初始
    },
  },
  mounted() {
    // console.log(this.data);
    if (this.data) {
      let data = this.data.split(",");
      let arr = [];
      data.forEach((item) => {
        // arr.push(baseUrl + item);
        arr.push(item);
      });
      this.dataList = arr;
    }
  },
};
</script>
<style lang="scss">
.bannerBox {
  width: 100%;
  height: 300rpx;
  // height: 300rpx;
  border-radius: 16rpx;

  swiper {
    height: 100% !important;
  }
}
</style>
